<template>
	<div>
		<div class="word-container">
			<div class="forts">
				学生信息查询
				<el-button @click='goBack()' class="back-button">
					返回首页
				</el-button>
			</div>
			<Time class="forts-time" />
		</div>

		<!-- 学号输入框 -->
		<div class="input-bar">
			<el-form ref="form" :model="inputSno" label-width="80px">
				<el-form-item label="学号">
					<el-input v-model="inputSno.sno"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search(inputSno)">查询</el-button>
				</el-form-item>
			</el-form>
		</div>


		<!-- 学生信息输出表 -->
		<div class="search-info-bar">
			<el-form ref="table" :model="tableData" label-width="80px">
				<el-form-item label="姓名">
					<el-input v-model="tableData.Sname"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-input v-model="tableData.Ssex"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="tableData.Sage"></el-input>
				</el-form-item>
				<el-form-item label="民族">
					<el-input v-model="tableData.Snation"></el-input>
				</el-form-item>
				<el-form-item label="生源地">
					<el-input v-model="tableData.Slocation"></el-input>
				</el-form-item>
				<el-form-item label="学制">
					<el-input v-model="tableData.Sacademic"></el-input>
				</el-form-item>
				<el-form-item label="专业">
					<el-input v-model="tableData.Smajor"></el-input>
				</el-form-item>
				<el-form-item label="政治面貌">
					<el-input v-model="tableData.Spolitic"></el-input>
				</el-form-item>
				<el-form-item label="奖惩记录">
					<el-input v-model="tableData.Srecord"></el-input>
				</el-form-item>
				<el-form-item label="转修复退学标记">
					<el-input v-model="tableData.Smark"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<img src="../assets/logo.png" alt="" />
	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import Time from "./Time.vue";
	import {
		defineComponent,
		ref
	} from 'vue';
	export default {
		name: "StudentSelect",
		components: {
			Time,
			defineComponent,
			ref,
		},
		// 数据读入
		data() {
			return {
				//学号表单数据绑定对象
				inputSno: [{
					sno: '',
				}],
				tableData: {},
			}
		},
		methods: {
			goBack() {
				//直接跳转
				this.$router.push('/main');
			},
			search(row) {
					ElMessage.success({
						message: '查询成功',
						type: 'success',
					})
					this.axios.post('http://localhost:8081/info/select', {
						sno: row.sno
					}).then(response => {
						this.tableData = response.data
					})
				},
			},
		}
</script>

<style>
	.forts {
		font-size: 40px;
	}

	.forts-time {
		font-size: 40px;
		position: absolute;
		left: 70%;
		top: 0%;
	}

	.word-container {
		width: 100%;
		height: 60px;
		background-color: #c4b8ff;
		border-radius: 3px;
	}

	.back-button {
		position: absolute;
		left: 93%;
		top: 10%;
	}

	.search-button {
		position: absolute;
		left: 26%;
		top: 20%;
	}

	.input-bar {
		width: 15%;
		position: absolute;
		left: 5%;
		top: 10%;
	}

	.search-info-bar {
		width: 40%;
		position: absolute;
		left: 20%;
		top: 23%;
	}
</style>
